<script setup lang="ts" name="Home">
import { onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

// 获取到路由器，此时就可以进行路由跳转
let router = useRouter()

onMounted(() => {
  console.log('Home 组件挂载了！')
  setTimeout(() => {
    console.log('3秒钟后要跳转到News组件！')
    // 编程式路由导航，其中实际开发过程中，编程式路由导航使用频率远远大于<Router-Link></Router-Link>的使用
    router.push({ path: '/news' })
  }, 3000)
})
onUnmounted(() => {
  console.log('Home 组件卸载了！')
})
</script>

<template>
  <div class="home">
    <img src="http://www.atguigu.com/images/index_new/logo.png" alt="" />
  </div>
</template>

<style scoped>
.home {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>
